<template>
  <div class="app-container">
    <div ref="cockpitRef" class="show-base">
      <div class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 class="dv-dec-10"/>
          <div class="d-flex jc-center">
            <dv-decoration-8 class="dv-dec-8" :color="decorationColor"/>
            <div class="title">
              <span class="title-text">{{ detail.title }}</span>
              <dv-decoration-6 class="dv-dec-6" :reverse="true" :color="['#50e3c2', '#67a1e5']"/>
            </div>
            <dv-decoration-8 class="dv-dec-8" :reverse="true" :color="decorationColor" />
          </div>
          <dv-decoration-10 class="dv-dec-10-s"/>
        </div>
        <div class="body-box">
          <div class="body-box-left">
            <div ref="leftUpBox" style="height: 50%; width: 100%;">
              <dv-border-box-8>
                <left-up-box
                  v-if="detail"
                  :browseNumber="detail.browseNumber"
                  :personBrowseNumber="detail.personBrowseNumber"
                  :orderNumber="detail.orderNumber"
                  :shareNumber="detail.shareNumber"
                  :leftUpBoxHeight="leftUpBoxHeight"
                  :is-show-student="detail.isShowStudent"
                  :old-student="detail.oldStudent"
                  :new-student="detail.newStudent"
                ></left-up-box>
              </dv-border-box-8>
            </div>
            <div ref="leftBelowBox" style="height: 50%; width: 100%;">
              <dv-border-box-13>
                <left-below-box
                  v-if="detail"
                  :sixHours="detail.sixHours"
                  :sixHoursBrowseNumber="detail.sixHoursBrowseNumber"
                  :sixHoursPersonBrowseNumber="detail.sixHoursPersonBrowseNumber"
                  :leftBelowBoxHeight="leftBelowBoxHeight"
                ></left-below-box>
              </dv-border-box-13>
            </div>
          </div>
          <div class="body-box-center">
            <div ref="centerUpBox" style="height: 80%; width: 100%;">
              <dv-border-box-10>
                <center-up-box
                  v-if="detail"
                  :enrollNumber="detail.enrollNumber"
                  :times="{start: detail.startTime,end: detail.endTime}"
                  :dataList="detail.enrollList" :centerUpBoxHeight="centerUpBoxHeight"/>
              </dv-border-box-10>
            </div>
            <div ref="centerBelowBox" style="height: 20%; width: 100%;">
              <dv-border-box-1>
                <center-below-box v-if="detail" :staffRank="detail.staffRank" :centerBelowBoxHeight="centerBelowBoxHeight"/>
              </dv-border-box-1>
            </div>
          </div>
          <div class="body-box-right">
            <div ref="rightUpBox" style="height: 50%; width: 100%;">
              <dv-border-box-8>
                <right-up-box v-if="detail" :staffRankList="detail.staffRankList" :rightUpBoxHeight="rightUpBoxHeight"/>
              </dv-border-box-8>
            </div>
            <div ref="rightBelowBox" style="height: 50%; width: 100%;">
              <dv-border-box-13>
                <right-below-box v-if="detail" :staffRankTeamList="detail.staffRankTeamList" :rightBelowBoxHeight="rightBelowBoxHeight"/>
              </dv-border-box-13>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="screenfull">
      <el-button type="primary" size="mini" @click="toggleFullscreen">数据全屏</el-button>
    </div>
  </div>
</template>

<script>
import CenterBelowBox from './components/bigdataPriview/CenterBelowBox'
import CenterUpBox from './components/bigdataPriview/CenterUpBox'
import LeftBelowBox from './components/bigdataPriview/LeftBelowBox'
import LeftUpBox from './components/bigdataPriview/LeftUpBox'
import RightBelowBox from './components/bigdataPriview/RightBelowBox'
import RightUpBox from './components/bigdataPriview/RightUpBox'
import { activityBigData } from "@/api/triones/activity";
import screenfull from "screenfull";
export default {
  name: "bigdata",
  components: {
    CenterBelowBox,
    CenterUpBox,
    LeftBelowBox,
    LeftUpBox,
    RightBelowBox,
    RightUpBox
  },
  data() {
    return {
      decorationColor: ['#568aea', '#000000'],
      detail: '',
      isFullscreen: false,
      leftUpBoxHeight: 0,
      leftBelowBoxHeight: 0,
      centerUpBoxHeight: 0,
      centerBelowBoxHeight: 0,
      rightUpBoxHeight: 0,
      rightBelowBoxHeight: 0
    }
  },
  mounted() {
    if (screenfull.isEnabled) {
      screenfull.on("change", () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
    const activityId = this.$route.query.activityId;
    this.getActivityBigData(activityId);
    this.timer = setInterval(() => {
      setTimeout(() => {
        this.getActivityBigData(activityId);
      }, 0)
    }, 3000)

    //监听高度变化
    this.handleResize();
    window.addEventListener('resize', this.handleResize);
  },
  beforeDestroy() {
    if (screenfull.isEnabled) {
      screenfull.off("change", () => {
        this.isFullscreen = screenfull.isFullscreen;
      });
    }
  },
  methods: {
    /** 尺寸变化 */
    handleResize() {
      this.leftUpBoxHeight = this.$refs.leftUpBox.offsetHeight;
      this.leftBelowBoxHeight = this.$refs.leftBelowBox.offsetHeight;
      this.centerUpBoxHeight = this.$refs.centerUpBox.offsetHeight;
      this.centerBelowBoxHeight = this.$refs.centerBelowBox.offsetHeight;
      this.rightUpBoxHeight = this.$refs.rightUpBox.offsetHeight;
      this.rightBelowBoxHeight = this.$refs.rightBelowBox.offsetHeight;
    },
    /** 获取活动大屏数据 */
    getActivityBigData(id) {
      activityBigData(id).then(response => {
        this.detail = response.data;
      })
    },
    /** 全屏 */
    toggleFullscreen() {
      if (!screenfull.isEnabled) {
        this.$message({ message: "你的浏览器不支持全屏", type: "warning" });
        return false;
      }
      // 需要全屏的页面
      screenfull.toggle(this.$refs.cockpitRef);
    },
  }
}
</script>

<style lang="scss" scoped>

.screenfull {
  position: absolute;
  top: 10px;
  left: 20px;
}

.app-main {
  .app-container {
    height: calc(100vh - 60px);
    min-height: 900px;
    overflow-y: scroll;
  }
}
.hasTagsView {
  .app-main {
    .app-container {
      height: calc(100vh - 94px);
      min-height: 900px;
      overflow-y: scroll;
    }
  }
}

.show-base {
  width: 100%;
  height: 100%;
  background-image: url("../../../assets/images/bigdata/pageBg.png");
  background-size: (100%,contain);
  margin-top: 20px;
  color: #d3d6dd;
  min-width: 1100px;
  overflow-x: scroll;
}

.host-body {
  padding: 10px;
  width: 100%;
  height: 100%;
  .dv-dec-10,
  .dv-dec-10-s {
    width: 33.3%;
    height: 10px;
  }
  .dv-dec-10-s {
    transform: rotateY(180deg);
  }
  .dv-dec-8 {
    width: 200px;
    height: 50px;
  }
  .title {
    position: relative;
    width: 500px;
    text-align: center;
    background-size: cover;
    background-repeat: no-repeat;

    .title-text {
      font-size: 24px;
      position: absolute;
      bottom: 0;
      top: 0;
      left: 50%;
      width: 100%;
      transform: translate(-50%);
      word-break: break-word;
    }

    .dv-dec-6 {
      position: absolute;
      bottom: -30px;
      left: 50%;
      width: 250px;
      height: 8px;
      transform: translate(-50%);
    }
  }

  // 第二行
  .aside-width {
    width: 40%;
  }
  .react-r-s,.react-l-s {
    background-color: #0f1325;
  }

  // 平行四边形
  .react-right {
    &.react-l-s {
      text-align: right;
      width: 500px;
    }
    font-size: 18px;
    width: 300px;
    line-height: 50px;
    text-align: center;
    transform: skewX(-45deg);

    .react-after {
      position: absolute;
      right: -25px;
      top: 0;
      height: 50px;
      width: 50px;
      background-color: #0f1325;
      transform: skewX(45deg);
    }

    .text {
      display: inline-block;
      transform: skewX(45deg);
    }
  }

  .react-left {
    &.react-l-s {
      width: 500px;
      text-align: left;
    }
    font-size: 18px;
    width: 300px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    transform: skewX(45deg);
    background-color: #0f1325;

    .react-left {
      position: absolute;
      left: -25px;
      top: 0;
      height: 50px;
      width: 50px;
      background-color: #0f1325;
      transform: skewX(-45deg);
    }

    .text {
      display: inline-block;
      transform: skewX(-45deg);
    }
  }
}

.body-box {
  height: calc(100% - 80px);
  margin-top: 30px;
  display: flex;
  .body-box-left {
    width: 30%;
  }
  .body-box-center {
    width: 40%;
  }
  .body-box-right {
    width: 30%;
  }
}

.d-flex {
  display: flex;
  align-content: center;
  justify-content: center;
}

</style>
